/*
 * @Description: 底部tabbar组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:50:56
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 17:10:06
 */
<template>
  <div class="foot_main">
    <!-- <div class="foot_perch"></div> -->
    <div class="foot_area flex-h flex-hsb">
      <div
        v-for="(menu, index) in menuList"
        :key="index"
        class="foot_menu fontsize24"
        :class="index == selectedIndex ? 'selected_menu' : ''"
        @click="chooseMenu(index)"
      >
        <div class="foot_icon">
          <i
            class="iconfont fontsize48"
            :class="menu.icon"
          ></i>
        </div>
        <p>{{menu.name}}</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return { // 底部按钮配置
      menuList: [{
        icon: 'icon-route-jdx',
        name: '定制班线'
      }, {
        icon: 'icon-jdx-my',
        name: '我的'
      }, {
        icon: 'icon-record-jdx',
        name: '购票记录'
      }]
    }
  },
  props: {
    selectedIndex: {
      type: String,
      default: '0'
    } // 当前选中按钮下标
  },
  methods: {
    chooseMenu(num) {
      if (this.selectedIndex !== num.toString()) { // 仅页面跳转时调用，当前页面点击当前按钮无效
        let pageUrl = ['buyIndex', 'myIndex', 'recordIndex']
        this.$router.push({ name: pageUrl[num] })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.foot_main {
  .foot_perch {
    // height: 100px;
  }
  .foot_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff;
    z-index: 9;
    .foot_menu {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      color: #999;
    }
    .selected_menu {
      color: #027aff;
    }
  }
}
</style>
